<script lang="ts" setup>
import { ref } from 'vue'
import { reactive } from 'vue'
import router from '@/router';
import { ElMessage, FormRules } from 'element-plus';
import { useRouter } from 'vue-router';
const routers = useRouter()
const sname = ref("赏析版块")
const mposts = ref(0)
const rposts = ref(0)
const clicks = ref(0)
const index = ref(3)

const mpostdata = ref()
const rpostdata = ref()
const sectiondata = ref({ "sd": '', "name": '' })

import { mpostsidServer,updatampostServer } from "@/api/mpost.js"

const mpostslist = async () => {
    let result = await mpostsidServer(sname.value)

    mpostdata.value = result.data.data
    mposts.value = result.data.num
    clicks.value = clicks.value + result.data.clicks
    for (let key in mpostdata.value) {
        let result = await rpostsidServer(mpostdata.value[key].mid)
        rpostdata.value = result.data.data + rpostdata.value
        rposts.value = result.data.num + rposts.value
        clicks.value = clicks.value + result.data.clicks
    }

}

const sectionData = async () => {
    let params = {
        countpage: 1,
        pagenumber: 5,
    }

    let result = await sectionlistServer(params)

    sectiondata.value = result.data.items[index.value]
}

sectionData()

mpostslist()

import { rpostsidServer } from "@/api/rpost.js"
import { sectionlistServer } from '@/api/section.js';
import moment from 'moment';

const clickserver = async (data)=>{
    data.clicks = data.clicks + 1
    clicks.value = clicks.value + 1
    let result = await updatampostServer(data.mid,data) as any;
    ElMessage.success(result.message ? result.message : '点击成功')
    routers.push({path:'/home/post/' + (data.mid-1)})

}
interface mpostForm {
    content: String,
    title: String,
    sectionname: String
}


const mpostData = ref<mpostForm>({
    content: '',
    title: '',
    sectionname: sname.value
})

const clearmpostdata = () => {
    mpostData.value = {
        content: '',
        title: '',
        sectionname: sname.value
    }
}
const dismpost = ref(false)
import { addServer } from '@/api/mpost.js';
const addpost = async () => {
    let result = await addServer(mpostData.value) as any;
    ElMessage.success(result.message ? result.message : '发布成功')
    clearmpostdata()
    mpostdata.value.length = 0
    mpostslist()
}
</script>
<template>
    <div class="active">
        <el-container>
            <el-header>
            </el-header>
            <el-main>
                <el-page-header style="margin-left: 170px;">
                    <template #breadcrumb>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/home' }">
                                首页
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>版块</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/home/active' }"><a>{{ sname }}</a></el-breadcrumb-item>
                        </el-breadcrumb>
                    </template>
                    <template #content>
                        <span> 诗词交流平台 </span>
                    </template>
                    <el-button type="primary" @click="dismpost = true">发布主贴</el-button>
                </el-page-header>
                <el-card style="margin-left: 170px;margin-top: 20px;display: flex;height: 180px;">
                    <el-row style="display: flex;">
                        <el-text tag="b" size="large" type="primary" style="margin-right: 40px;">{{sname}}</el-text>
                        <el-row>
                            <el-col :span="6">
                                <el-statistic title="主贴数" :value="mposts" />
                            </el-col>
                            <el-col :span="6">
                                <el-statistic title="回复贴数" :value="rposts" />
                            </el-col>
                            <el-col :span="6">
                                <el-statistic title="总点击数" :value="clicks" />
                            </el-col>
                        </el-row>
                        <el-divider />
                        <el-text tag="i" size="small" type="info" style="">
                            {{ sectiondata.sd }}</el-text>
                    </el-row>
                </el-card>
                <el-card style="margin-left: 170px;margin-top: 20px;display: flex;" router>
                    <el-row style="" v-for="(data, index) in mpostdata" router>
                        <el-text tag="b" size="large" type="primary"
                            style="width: 50px;">[赏析]</el-text>
                        <el-button  text style="width: 280px;margin-left: 10px;" @click="clickserver(data)">{{
                            data.title }}</el-button>
                        <el-text tag="i" size="default" type="success"
                            style="margin-right: 5px;margin-left: 20px;">作者:</el-text>
                        <el-text tag="sub" size="default" type="info" >{{ data.username }}</el-text>
                        <el-text tag="p" size="large" type="info" style="margin-left: 400px;margin-right: 20px;">{{
                            data.replies + "/" +
                            data.clicks }}</el-text>
                        <el-text tag="p" size="small" type="info" style="margin-left: 300px;margin-right: 0px;">
                            {{ moment(data.finaltime).format('YYYY-MM-DD HH:mm') }}</el-text>
                        <div style="margin-top: 20px;margin-bottom: 20px;">
                            <hr>
                        </div>
                    </el-row>
                </el-card>
            </el-main>
            <el-footer>
            </el-footer>
        </el-container>
    </div>
    <el-dialog v-model="dismpost" title="发布帖子" width="500">
        <el-form ref="form" class="add" :model="mpostData">
            <el-form-item label="帖子标题">
                <el-input placeholder="请输入帖子标题" v-model="mpostData.title"></el-input>
            </el-form-item>
            <el-form-item label="帖子内容">
                <el-input placeholder="请输入帖子内容" v-model="mpostData.content" style="height: 300px;"
                    :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dismpost = false, clearmpostdata()">取消</el-button>
                <el-button type="primary" @click="addpost(), dismpost = false">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.active {
    height: 100%;

    .el-header {
        background: url('@/assets/section.jpg') no-repeat center / cover;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100px;


    }

    .el-main {
        background-color: #D1CFB9;
        height: auto;

        .el-row {

            display: flex;
            align-items: center;
            justify-content: space-between;

            .el-col {
                text-align: center;
            }
        }

    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #D1CFB9;
        height: 100px;
    }

}
</style>